<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="品牌建设服务"></Breadcrumb>
    <h1 class="page-title">品牌建设服务</h1>
    <p class="page-subtitle">专业品牌建设解决方案，助力企业打造差异化竞争优势和长期品牌价值</p>
    <div class="intro-section">
      <div class="intro-content">
        <div class="intro-text">
          <h2>品牌建设服务概述</h2>
          <p>在竞争激烈的市场环境中，品牌是企业最宝贵的无形资产。我们的品牌建设服务从市场调研入手，深入分析行业趋势和竞争格局，帮助企业明确品牌定位，构建独特的品牌形象和品牌价值体系。</p>
          <p>我们拥有一支由品牌战略专家、设计师和营销专家组成的专业团队，采用国际先进的品牌建设方法论，为客户提供从品牌战略规划到落地执行的全流程服务。通过系统化的品牌建设流程，我们助力企业打造具有持久生命力的强势品牌。</p>
          <p>我们的品牌建设服务已帮助超过200家企业成功打造品牌，涵盖消费品、科技、金融、教育等多个行业，客户满意度达98%。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="品牌建设" class="intro-image">
      </div>
    </div>

    <div class="services-section">
      <h2 class="section-title">我们的服务内容</h2>
      <p>全方位的品牌建设服务，覆盖品牌全生命周期</p>

      <div class="services-grid">
        <!-- 品牌战略 -->
        <div class="service-card">
          <div class="service-icon">🎯</div>
          <h3>品牌战略规划</h3>
          <p>基于市场分析和企业战略，制定品牌定位、核心价值和差异化策略，构建品牌发展蓝图。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 品牌命名 -->
        <div class="service-card">
          <div class="service-icon">🏷️</div>
          <h3>品牌命名与口号</h3>
          <p>创意命名和口号设计，确保品牌名称易记、独特且能准确传达品牌价值主张。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- VI设计 -->
        <div class="service-card">
          <div class="service-icon">🎨</div>
          <h3>品牌视觉识别系统</h3>
          <p>设计品牌标志、色彩系统、字体系统和视觉元素，构建统一的品牌视觉形象。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 品牌传播 -->
        <div class="service-card">
          <div class="service-icon">📢</div>
          <h3>品牌传播策略</h3>
          <p>制定整合营销传播计划，包括广告、公关、数字营销等，提升品牌知名度和美誉度。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 品牌体验 -->
        <div class="service-card">
          <div class="service-icon">🌟</div>
          <h3>品牌体验设计</h3>
          <p>设计线上线下品牌接触点的用户体验，确保品牌承诺在各个触点得到一致体现。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 品牌管理 -->
        <div class="service-card">
          <div class="service-icon">📈</div>
          <h3>品牌资产管理</h3>
          <p>建立品牌资产监测体系，评估品牌健康度，持续优化品牌建设策略。</p>
          <a href="javascript:;">了解详情</a>
        </div>
      </div>
    </div>

    <div class="process-section">
      <h2 class="section-title">品牌建设流程</h2>
      <p>科学严谨的品牌建设流程，确保品牌战略有效落地</p>

      <div class="process-steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-title">市场调研</div>
          <div class="step-desc">分析行业趋势、竞争格局和目标受众</div>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <div class="step-title">品牌定位</div>
          <div class="step-desc">确定品牌差异化定位和核心价值主张</div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <div class="step-title">创意设计</div>
          <div class="step-desc">开发品牌名称、标志和视觉识别系统</div>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <div class="step-title">传播规划</div>
          <div class="step-desc">制定整合营销传播策略和执行计划</div>
        </div>

        <div class="step">
          <div class="step-number">5</div>
          <div class="step-title">落地实施</div>
          <div class="step-desc">执行品牌传播活动，监测品牌表现</div>
        </div>
      </div>
    </div>

    <div class="value-section">
      <h3 class="value-title">品牌建设的核心价值</h3>

      <div class="value-grid">
        <div class="value-item">
          <div class="value-icon">💰</div>
          <h3>提升品牌溢价</h3>
          <p>强势品牌能够获得更高的产品溢价和利润率</p>
        </div>

        <div class="value-item">
          <div class="value-icon">🤝</div>
          <h3>增强客户忠诚</h3>
          <p>良好的品牌形象能够建立客户情感连接，提高复购率</p>
        </div>

        <div class="value-item">
          <div class="value-icon">🛡️</div>
          <h3>抵御市场风险</h3>
          <p>强势品牌能够更好地应对市场竞争和经济波动</p>
        </div>

        <div class="value-item">
          <div class="value-icon">📈</div>
          <h3>促进业务增长</h3>
          <p>品牌建设能够支持企业业务拓展和多元化发展</p>
        </div>
      </div>
    </div>

    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了专业的品牌建设服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="科技品牌案例" class="case-image">
          <div class="case-content">
            <h4>某科技企业品牌升级</h4>
            <p>为科技企业提供全面的品牌战略规划和视觉识别系统设计，助力品牌形象升级。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="消费品案例" class="case-image">
          <div class="case-content">
            <h4>新消费品牌创建</h4>
            <p>从品牌命名、定位到视觉设计，为新兴消费品企业打造差异化品牌形象。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="金融案例" class="case-image">
          <div class="case-content">
            <h4>金融机构品牌重塑</h4>
            <p>帮助传统金融机构重塑品牌形象，提升在年轻消费群体中的品牌认知。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>


    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 品牌建设介绍 */
.intro-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 服务内容 */
.services-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 服务网格 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.service-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.service-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-card a {
  display: inline-block;
  background-color: #1e5799;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.service-card a:hover {
  background-color: #207cca;
}

/* 品牌建设流程 */
.process-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.process-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  position: relative;
}

.process-steps:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #207cca, #1e5799);
  z-index: 1;
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 20%;
}

.step-number {
  width: 60px;
  height: 60px;
  background-color: #207cca;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 15px;
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.3);
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #1e5799;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 14px;
  color: #666;
}

/* 品牌价值 */
.value-section {
  background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
  border-radius: 8px;
  padding: 60px 40px;
  margin-bottom: 40px;
  color: white;
}

.value-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 40px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

.value-item {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s;
}

.value-item:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.2);
}

.value-icon {
  font-size: 40px;
  margin-bottom: 20px;
}

.value-item h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.value-item p {
  font-size: 14px;
  opacity: 0.9;
}

/* 案例展示 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}
</style>